<template>
	<div class="system_menu_container">
		<sw-common-frame class="table" :loading="loading">
			<template slot="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
			</template>
			<el-form slot="query" size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.name" clearable placeholder="菜单名称" style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="handleQueryData()">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table slot="table" :data="tableListData" v-bind="tableConfig" @row-click="handleRowClick">
				<el-table-column label="菜单名称" prop="name" min-width="180" show-overflow-tooltip></el-table-column>
				<el-table-column label="菜单路径" min-width="240">
					<template slot-scope="{ row }">
						<template v-if="row.level !== '3'">{{ row.url }}</template>
						<template v-if="row.level === '3'">{{ row.id }}</template>
					</template>
				</el-table-column>
				<el-table-column label="排序" prop="orderSort" width="80" align="center"></el-table-column>
				<el-table-column label="创建人" prop="createName" width="100"></el-table-column>
				<el-table-column label="创建时间" prop="createTime" width="160" />
				<el-table-column label="操作" width="210" align="right" header-align="left">
					<el-button-group slot-scope="{ row }">
						<template v-if="row.level !== '3'">
							<el-button size="mini" type="primary" @click.stop="handleAddChildren(row)">添加子级</el-button>
						</template>
						<el-button size="mini" type="warning" @click.stop="handleOpenDialog(row.id)">修改</el-button>
						<el-button size="mini" type="danger" @click.stop="handleDeleteData(row)">删除</el-button>
					</el-button-group>
				</el-table-column>
			</el-table>
		</sw-common-frame>
		<form-dialog v-model="formDialog" :data-id="dataId" :list="menuListData" :is-sub.sync="isChildren" @refresh="queryTableData()" />
	</div>
</template>

<script>
import lodash from 'lodash';
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { getMenuTree, deleteMenu } from '@/api/system/tbSysMenu';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '菜单',
			isChildren: false,
			tableConfig: {
				ref: 'table',
				rowKey: 'id',
				height: '100%',
				size: 'medium',
				expandedRowKeys: [],
				treeProps: {
					children: 'childList',
					hasChildren: 'hasChildren'
				}
			},
			queryName: '',
			checkedMenu: null
		};
	},
	computed: {
		listFunction() {
			return eval(getMenuTree);
		},
		deleteFunction() {
			return eval(deleteMenu);
		},
		requestParams() {
			return { pId: 0 };
		},
		menuListData() {
			let menuArr = this.$treeToFlat(this.tableData, 'childList');
			let menuNoButton = menuArr.filter((item) => item.level !== '3');
			return this.$flatToTree(menuNoButton, 'pid');
		},
		tableListData() {
			let name = this.queryName.toLowerCase();
			let filterTreeData = (nodes) => {
				let filtered = [];
				nodes.forEach((node) => {
					if (node.name.toLowerCase().includes(name)) {
						let child = node.children ? filterTreeData(node.children) : [];
						if (child.length) {
							filtered.push({ ...node, children: child });
						} else {
							filtered.push(node);
						}
					} else if (node.children) {
						let children = filterTreeData(node.children);
						if (children.length) {
							filtered.push({ ...node, children });
						}
					}
				});
				return filtered;
			};
			return filterTreeData(this.tableData);
		}
	},
	watch: {
		queryName() {
			this.$refs['table'].doLayout();
		},
		tableListData(arr) {
			this.$nextTick(() => {
				arr.forEach((item) => {
					this.$refs['table'].toggleRowExpansion(item, true);
				});
			});
		}
	},

	methods: {
		//查询菜单
		handleQueryData() {
			this.queryName = lodash.cloneDeep(this.queryData.name);
		},

		//添加子级
		handleAddChildren(data) {
			this.dataId = data.id;
			this.formDialog = true;
			this.isChildren = true;
		},

		//点击行
		handleRowClick(row, column, event) {
			if (row.childList.length === 0) return false;
			this.$refs['table'].toggleRowExpansion(row);
		}
	}
};
</script>
<style lang="scss" scoped>
.system_menu_container {
	display: flex;
	height: 100%;
	.table {
		flex: 1;
		overflow: hidden;
	}
	.button {
		width: 25%;
		flex-shrink: 0;
	}
}
.admin_menu_wrapper {
	height: 100%;
	padding: 6px;
	overflow: hidden;
	box-sizing: border-box;
	.el-row {
		height: 100%;
	}
}
</style>
